<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.transit.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/shake.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="web">
			<!-- 内容 -->
			<div class="cont">
				<div class="bjdh">
					<img class="fist" src="img/bjdonhua.png" />
					<img src="img/bg.png" />
				</div>
				<div class="kaig animated fadeIn">
					<img src="img/kg.png" />
				</div>
				<div class="wenzi">
					<div class="yyy animated bounceInLeft">
						<img src="img/yyy.png" />
						<div class="zd"><img src="img/zd.png" /></div>
						<div class="yd"><img src="img/yd.png" /></div>
					</div>
					<div class="zzz animated bounceInRight"><img src="img/ZZZ.png" /></div>
				</div>
				<div class="pz"><img src="img/bottle.png" /></div>
				<div class="but animated fadeInDown">
					<img src="img/index_an1.png" />
					<div class="tuwen"><img src="img/wenzi.png" /></div>
				</div>
				<div class="but2 animated fadeInUp">
					<img src="img/index_an1.png" />
					<div class="tuwen2"><img src="img/yxsm.png" /></div>
				</div>
			</div>
			<div class="sm">
				<img src="img/sm.png" />
				<div class="sx"><img src="img/sx.png" /></div>
			</div>
		</div>
		<!-- 图片 -->
		<div class="pic" style="display: none;">
			<img src="img/zero.png" />
			<img src="img/one.png" />
			<img src="img/two.png" />
			<img src="img/three.png" />
			<img src="img/four.png" />
			<img src="img/five.png" />
			<img src="img/six.png" />
			<img src="img/thvee.png" />
			<img src="img/eight.png" />
			<img src="img/even.png" />
		</div>
		<!-- 进入抽奖 -->
		<div class="web_two">
			<div class="cont">
				<div class="sou"><img src="img/shou.png" /></div>
				<div class="energy">
					<img src="img/Energy box.png" />
					<div class="ydbg"><img src="img/Techfit.png" /></div>
				</div>
				<div class="pz">
					<img src="img/pz.png" />
				</div>
				<div class="boom"><img src="img/bomb.png" /></div>
				<div class="yh"><img src="img/yh.png" /></div>
				<div class="hyu"><img src="img/hyu_one.png" /></div>
				<div class="hyu_two"><img src="img/hyu_two.png" /></div>
				<div class="hyu_three"><img src="img/hyu_three.png" /></div>
				<div class="hyu_four"><img src="img/hyu_four.png" /></div>
			</div>
		</div>
		<!-- 结果一 -->
		<div class="result_one">
			<div class="cont">
				<div class="energy">
					<img src="img/Energy box.png" />
					<div class="ydbg"><img src="img/Techfit.png" /></div>
				</div>
				<div class="music"><img src="img/music.png" /></div>
				<div class="renovate"><img src="img/sx.png" /></div>
				<div class="shuzi_one"><img src="" /></div>
				<div class="shuzi_two"><img src="" /></div>
				<div class="shuzi_three"><img src="img/ten.png" /></div>
				<div class="bot">
					<img src="img/ss.png" />
					<div class="diwen"><img src="img/dwen_two.png" /></div>
				</div>
			</div>
		</div>
		<!-- 结果二 -->
		<div class="result_two">
			<div class="cont">
				<div class="energy">
					<img src="img/Energy box.png" />
					<div class="ydbg"><img src="img/Techfit.png" /></div>
				</div>
				<div class="music"><img src="img/music.png" /></div>
				<div class="renovate"><img src="img/sx.png" /></div>
				<div class="shuzi_one"><img src="" /></div>
				<div class="shuzi_two"><img src="" /></div>
				<div class="shuzi_three"><img src="img/ten.png" /></div>
				<div class="bot">
					<img src="img/ss.png" />
					<div class="diwen"><img src="img/dwen_two.png" /></div>
				</div>
			</div>
		</div>
		<!-- 结果三 -->
		<div class="result_three">
			<div class="cont">
				<div class="energy">
					<img src="img/Energy box.png" />
					<div class="ydbg"><img src="img/Techfit.png" /></div>
				</div>、
				<div class="music"><img src="img/music.png" /></div>
				<div class="renovate"><img src="img/sx.png" /></div>
				<div class="shuzi_one"><img src="" /></div>
				<div class="shuzi_two"><img src="" /></div>
				<div class="shuzi_three"><img src="img/ten.png" /></div>
				<div class="bot">
					<img src="img/ss.png" />
					<a href="Lottery.html">
						<div class="diwen2"><img src="img/dwen.png" /></div>
					</a>
				</div>
			</div>
		</div>
		<!-- 结果四 -->
		<div class="result_four">
			<div class="cont">
				<div class="energy">
					<img src="img/Energy box.png" />
					<div class="ydbg"><img src="img/Techfit.png" /></div>
				</div>、
				<div class="music"><img src="img/music.png" /></div>
				<div class="renovate"><img src="img/sx.png" /></div>
				<div class="shuzi_one"><img src="img/one.png" /></div>
				<div class="shuzi_two"><img src="img/zero.png" /></div>
				<div class="shuzi_three"><img src="img/ten.png" /></div>
				<div class="shuzi_four"><img src="img/zero.png" /></div>
				<div class="bot">
					<img src="img/ss.png" />
					<a href="Lottery.html">
						<div class="diwen2"><img src="img/dwen.png" /></div>
					</a>
				</div>
			</div>
		</div>
		<audio src="Panama.mp3" autoplay="autoplay" loop="loop" class="btn"></audio> <!--添加音乐-->
	</body>
	<script type="text/javascript">
		//点击反馈
		$(".kaig").on("touchstart", function() {
			$(this).css("opacity", "0.9")
		})
		$(".kaig").on("touchend", function() {
			$(this).css("opacity", "1")
		})
		$(".but").on("touchstart", function() {
			$(this).css("opacity", "0.8")
		})
		$(".but").on("touchend", function() {
			$(this).css("opacity", "1")
		})
		$(".but2").on("touchstart", function() {
			$(this).css("opacity", "0.8")
		})
		$(".but2").on("touchend", function() {
			$(this).css("opacity", "1")
		})
		$(".but2").on("click", function() {
			$(".sm").transit({
				scale: 1,
			})
		})
		//图片测试
//		console.log($(".pic").find("img"));
//		var arr = new Array();
//		arr = $(".pic").find("img");
//		console.log(arr[0]);
//		console.log(arr[5]);
//		$(".result_one .shuzi_one img").attr("src", arr[5].src);
		//刷新
		//		$(".result_one .shuzi_one img").attr("src",arr[num])
		//				$(".result_one .shuzi_two img").attr("src",arr[the])

		$(".sm .sx").on("click", function() {
			$(".sm").transit({
				scale: 0,
			})
		})
		//进入摇一摇
		var digit;
		$(".kaig").on("click", function() {
			$(".web_two .ydbg img").css("transform", "translateX(-90%)")
			$(".web_two").transit({
				scale: 1
			})
			$(".web").css("display", "none");
			setTimeout(function() {
				window.removeEventListener('devicemotion', abc);
				var unit = Math.floor(digit);
				var num = Math.floor(unit / 10); //拿到十位数
				var the = unit % 10; //拿到个位数
				console.log(num);
				console.log(the);
				$(".btn")[0].pause(); //停止音乐
				alert("游戏结束了！")
			},10000)
			setTimeout(function() {
				qwe();
			}, 14000)
            
			var two = document.querySelectorAll(".web_two")
			//摇一摇(使用DeviceMotion事件, 推荐,应为可以计算加速度)
			if(window.DeviceMotionEvent) {
				var speed = 5; // 用来判定的加速度阈值，太大了则很难触发
				var x, y, z, lastX, lastY, lastZ;
				x = y = z = lastX = lastY = lastZ = 0;
				var sn = 90;
				var zon = 100;
				window.addEventListener('devicemotion', abc)

				function abc(event) {

					var acceleration = event.accelerationIncludingGravity;
					x = acceleration.x;
					y = acceleration.y;

					if(Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
						// 用户设备摇动了，触发响应操作
						// 此处的判断依据是用户设备的加速度大于我们设置的阈值
						//          alert('摇了');
						sn -= 0.5;
						console.log(sn)
						if(sn<=30){
							speed = 60;
						} 
						if(30<=sn<=60){
							speed = 40;
						}
						if(sn>60){
							speed = 10;
						}
						if(sn >= 0) {
							$(".ydbg img").css("transform", "translateX(-" + sn + "%)")
							//              console.log(sn)
							digit = zon - sn;
							console.log(Math.floor(digit))
						} else {
							return;
						}

					}
					lastX = x;
					lastY = y;
				};
			}
//			$(".result_two").on("click", function() {
//				$(".result_two").css("display", "block")
//				$(".result_two").transit({
//					scale: 0
//				})
//				location.reload(); //刷新
//			})
//			$(".result_one").on("click", function() {
//				$(".result_two").css("display", "block")
//				$(".result_two").transit({
//					scale: 0
//				})
//				location.reload(); //刷新
//			})
		})

		function qwe() {
			var unit = Math.floor(digit);
			var num = Math.floor(unit / 10); //拿到十位数
			var the = unit % 10; //拿到个位数
			console.log(num);
			console.log(the);
			console.log($(".pic").find("img"));
			var arr = new Array();
			arr = $(".pic").find("img");
			console.log(arr[0]);
			//结果一
			if(unit <= 30) {
				$(".result_one").transit({
				scale: 1
			    })
				$(".web").css("display", "none")
								$(".result_one .shuzi_one img").attr("src",arr[num].currentSrc)
								$(".result_one .shuzi_two img").attr("src",arr[the].currentSrc)
				$(".web_two").transit({
					scale:0
				})
			}
			//结果二
			if(unit > 30 && unit <= 70) {
				$(".result_two").transit({
				scale: 1
			    })
				$(".web").css("display", "none")
								$(".result_two .shuzi_one img").attr("src",arr[num].currentSrc)
								$(".result_two .shuzi_two img").attr("src",arr[the].currentSrc)
				$(".web_two").transit({
					scale:0
				})
			}
			//结果三
			if(unit > 70 && unit <= 99) {
				$(".result_three").transit({
				scale: 1
			    })
				$(".web").css("display", "none")
					
				$(".web_two").transit({
					scale:0
				})
				$(".result_three .shuzi_one img").attr("src",arr[num].currentSrc)
			    $(".result_three .shuzi_two img").attr("src",arr[the].currentSrc)
			}
			//结果四
			if(unit == 100) {
				$(".result_four").transit({
				scale: 1
			    })
				$(".web").css("display", "none")
				$(".web_two").transit({
					scale:0
				})
			}
		}
		//再玩一次跳转
		$(".result_one .diwen").on("click", function() {
			$(".result_one").transit({
				scale: 0
			})
			$(".result_two").transit({
				scale: 0
			})
			$(".web").css("display", "block")
			$(".web").transit({
				scale: 1
			})
			$(".web_two").css("display", "block")
			$(".web_two").transit({
				scale: 0
			})
		})
		$(".result_two .diwen").on("click", function() {
			$(".result_one").transit({
				scale: 0
			})
			$(".result_two").transit({
				scale: 0
			})
			$(".web").css("display", "block")
			$(".web").transit({
				scale: 1
			})
			$(".web_two").css("display", "block")
			$(".web_two").transit({
				scale: 0
			})
		})
		
	</script>
	<script src="js/vconsole.min.js" type="text/javascript" charset="utf-8"></script>

</html>